package com.shu.course

import android.os.Bundle
import android.view.Display.Mode
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.viewModels
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Clear
import androidx.compose.material.icons.filled.Search
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.colorspace.ColorSpaces
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import coil.compose.AsyncImage
import coil.compose.rememberAsyncImagePainter
import coil.request.ImageRequest
import coil.transform.CircleCropTransformation
import com.shu.course.ui.theme.CourseTheme

class MainActivity : ComponentActivity() {
    private val viewModel: CourseViewModel by viewModels()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            CourseTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background
                ) {
                    Column(Modifier.background(Color(0xFFEDEDED).convert(ColorSpaces.CieXyz))) {
                        SearchBar { str ->
                            viewModel.search(str)
                        }
                        UserList(users = viewModel.userList)
                    }
                }
            }
        }

    }
}

@Composable
fun UserList(users: List<User>) {
    LazyColumn(
        modifier = Modifier
            .fillMaxSize()
            .background(Color(0xFFEDEDED).convert(ColorSpaces.CieXyz))
    ) {
        itemsIndexed(users) { index, user ->
            UserItem(user = user)
            if (index < users.lastIndex) {
                Divider(
                    startIndent = 68.dp,
                    color = Color(0xFFE5E5E5).convert(ColorSpaces.CieXyz),
                    thickness = 0.8f.dp
                )
            }
        }
    }
}

@Composable
fun UserItem(user: User) {
    Row(
        Modifier.fillMaxSize()
    ) {
        Image(
            painter = rememberAsyncImagePainter(
                model = ImageRequest.Builder(LocalContext.current).data(user.avatar_url).apply {
                    //占位图
                    placeholder(R.drawable.ic_default_avatar)
                    //淡出效果
                    crossfade(true)
                }.build(),
            ),
            contentDescription = "user avatar",
            Modifier
                .padding(4.dp)
                .size(48.dp)
                .clip(RoundedCornerShape(4.dp))
        )
        Column(
            Modifier
                .weight(1f)
                .align(Alignment.CenterVertically)
        ) {
            Text(text = user.name, fontSize = 17.sp)
            Text(text = user.id.toString(), fontSize = 13.sp)
        }
    }

}

@Composable
fun SearchBar(onSearch: (str: String) -> Unit) {
    var text by remember { mutableStateOf("") }
    TextField(value = text,
        placeholder = { Text(text = "搜索用户", color = Color.Gray, fontSize = 14.sp) },
        onValueChange = { text = it },
        leadingIcon = @Composable {
            Image(imageVector = Icons.Filled.Search,
                contentDescription = "search",
                modifier = Modifier.clickable {
                    onSearch(text)
                })
        },
        trailingIcon = @Composable {
            Image(imageVector = Icons.Filled.Clear,
                contentDescription = "clear",
                modifier = Modifier.clickable {
                    text = ""
                })
        },
        colors = TextFieldDefaults.textFieldColors(
            backgroundColor = Color(0xFFEDEDED).convert(
                ColorSpaces.CieXyz
            )
        ),
        modifier = Modifier
            .fillMaxWidth()
            .height(48.dp)
            .statusBarsPadding()

    )
}
